/*@keyframes move {*/
    /*0%{ left : 100px;  top: 100px  ; transform: rotate(0deg);border-radius:0 ; }*/
    /*33.33333%{left: 100px; top: 500px;transform: rotate(180deg);border-radius:50%;background: coral }*/
    /*66.66666%{left:500px;top:500px;transform: rotate(0deg);border-radius:0;background: blueviolet}*/
    /*100%{left: 500px;top:100px;transform: rotate(180deg);border-radius:50%;background: forestgreen}*/
/*}*/

/*@keyframes ccc {*/
    /*0% {*/
        /*left: 100px;*/
        /*top: 100px;*/
        /*transform: rotate(0deg);*/
        /*border-radius: 0;*/
    /*}*/
    /*33.33333% {*/
        /*left: 500px;*/
        /*top: 100px;*/
        /*transform: rotate(180deg);*/
        /*border-radius: 50%;*/
        /*background: forestgreen*/
    /*}*/
    /*66.66666% {*/
        /*left: 100px;*/
        /*top: 500px;*/
        /*transform: rotate(180deg);*/
        /*border-radius: 50%;*/
        /*background: coral*/
    /*}*/
    /*100% {*/
        /*left: 500px;*/
        /*top: 500px;*/
        /*transform: rotate(0deg);*/
        /*border-radius: 0;*/
        /*background: blueviolet*/
    /*}*/
/*}*/
@keyframes a{
    0%{border-radius: 50%;transform:scale(0);width: 30px;height: 30px;}
    100%{border-radius: 50%;transform:scale(1);width: 30px;height: 30px;}
}
@keyframes b{
    0%{border-radius: 50%;transform:scale(0);width: 30px;height: 30px;}
    100%{border-radius: 50%;transform:scale(1);width: 30px;height: 30px;}
}
@keyframes c{
    0%{border-radius: 50%;transform:scale(0);width: 30px;height: 30px;}
    100%{border-radius: 50%;transform:scale(1);width: 30px;height: 30px;}
}

#index{
    background: midnightblue;
}


#box{
    width: 30px;
    height: 30px;
    background: white;
    position: absolute;
    top: 100px;
    left:100px;
    animation-name:a;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;



}

#box2 {

    background: white;
    position: absolute;
    top: 100px;
    left: 150px;
    animation-name: b;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay:0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

#box3 {

    background: white;
    position: absolute;
    top: 100px;
    left: 200px;
    animation-name: c;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay:1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}



#box1{
    width: 333px;
    height: 233px;
    background: royalblue;
    position: absolute;
    top: 100px;
    left:100px;
    animation-name:ccc;
    animation-duration: 3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;



}